import React, { ReactElement, useState, useEffect } from 'react';
import { View, ScrollView, Image } from 'react-native';
import JSBI from 'jsbi';

import { OrderApi } from '../../api';
import { OrderShowInfo } from '../../api/order/getOrderList';
import Button from '../../components/Button';
import NavBar from '../../components/NavBar';
import Notch, { NotchType } from '../../components/Notch';
import CustomText from '../../components/Text';
import { orderDetail } from '../../constant/resource';
import { ROW_SHADOW_OPTIONS } from '../../constant/shadow';
import navigator from '../../util/navigator';
import { ORDER_STATUS_DESC, ORDER_TYPE } from './constant';

import styles from './style';
import { transformShowPrice } from '../../util/transformMoney';

export default (): ReactElement => {
  const [orderList, setOrderList] = useState<OrderShowInfo[]>([]);

  useEffect((): void => {
    OrderApi.getOrderList().then((res): void => {
      if (res.code === 0) {
        setOrderList(res.data ? res.data.orders : []);
      }
    });
  }, []);

  return (
    <Notch style={styles.container} type={NotchType.Top}>
      <NavBar title="我的订单" />
      <ScrollView contentContainerStyle={styles.content}>
        {orderList.map(
          (order): ReactElement => {
            const isOriginOrder = order.orderType === ORDER_TYPE.Commodity;
            return (
              <Button
                needSVGShadow
                shadowStyle={styles.shadow}
                shadowOptions={ROW_SHADOW_OPTIONS}
                style={styles.item}
                onPress={(): void => {
                  navigator.push('OrderDetail', {
                    orderId: order.id,
                    type: order.orderType
                  });
                }}
              >
                <CustomText style={styles.name}>
                  {isOriginOrder ? '寒假·七年级数学·提高班' : order.content}
                </CustomText>
                <CustomText style={styles.time}>
                  下单时间：
                  {isOriginOrder ? '2020-04-07 18:22:45' : order.createTime}
                </CustomText>
                <CustomText style={styles.orderNumber}>
                  订单号：
                  {isOriginOrder
                    ? '329487829374989034'
                    : JSBI.BigInt(order.id).toString()}
                </CustomText>
                <View style={styles.statusContent}>
                  <CustomText style={styles.status}>
                    {ORDER_STATUS_DESC[order.status]}
                  </CustomText>
                  <CustomText style={styles.detail}>查看详情</CustomText>
                  <Image source={orderDetail} style={styles.orderDetail} />
                </View>
                <View style={styles.payContent}>
                  <CustomText style={styles.pay}>实付：</CustomText>
                  <CustomText style={styles.price}>
                    ¥
                    {isOriginOrder
                      ? '2699'
                      : transformShowPrice(order.payAmount)}
                  </CustomText>
                </View>
              </Button>
            );
          }
        )}
      </ScrollView>
    </Notch>
  );
};
